<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<title>Marvin JS Examples - Get Selection</title>
	<link type="text/css" rel="stylesheet" href="../css/doc.css">
	<link type="text/css" rel="stylesheet" href="../js/lib/rainbow/github.css" />
	<script src="../js/lib/rainbow/rainbow-custom.min.js"></script>
	<script src="../js/lib/jquery-1.9.1.min.js"></script>
	<script src="../gui/lib/promise-1.0.0.min.js"></script>
	<script src="../js/marvinjslauncher.js"></script>
	<script type="text/javascript">

		$(document).ready(function handleDocumentReady (e) {
			MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
				// initalize sketcher
				sketcherInstance.importStructure("mol",caffeineSource);
				sketcherInstance.setDisplaySettings({
					'carbonLabelVisible' : true,
					'atomIndicesVisible' : true
				});

				getSelection = function () {
					sketcherInstance.exportStructure("mrv").then(function(source) {
						var selection = sketcherInstance.getSelection();
						$("#molsource").val(mrvWithSelection(source, selection));
					}, function(error) {
						alert("Cannot retrieve the molecule source");
					});	
				};
				
				$("#getSelectionButton").on("click", getSelection);


			}, function () {
				alert("Cannot retrieve sketcher instance from iframe");
			});
		});

		function mrvWithSelection(mrv, selection) {
			var parser = new DOMParser();
			if(selection && selection.atoms) {
				var xml = parser.parseFromString(mrv, "text/xml");
				var atoms = xml.getElementsByTagName('atom');
				var selectedAtoms = selection.atoms.split(",");
				for(var i = 0; i < selectedAtoms.length; i++) {
					var index = selectedAtoms[i]-1;
					if(atoms[index]) {
						atoms[index].setAttribute("isSelected", true);
					}
				}
				return new XMLSerializer().serializeToString(xml);
			}
			return mrv;
		}
		
		var caffeineSource = "\n\n\n"+
			" 14 15  0  0  0  0  0  0  0  0999 V2000\n"+
			"    0.5089    7.8316    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    1.2234    6.5941    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    1.2234    7.4191    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"   -0.2055    6.5941    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"   -0.9200    7.8316    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    0.5089    5.3566    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"   -0.2055    7.4191    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    0.5089    6.1816    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"   -0.9200    6.1816    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    0.5089    8.6566    0.0000 O   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    2.4929    7.0066    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    2.0080    7.6740    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    2.0080    6.3391    0.0000 N   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"    2.2630    8.4586    0.0000 C   0  0  0  0  0  0  0  0  0  0  0  0\n"+
			"  1  7  1  0  0  0  0\n"+
			"  8  2  1  0  0  0  0\n"+
			"  1  3  1  0  0  0  0\n"+
			"  2  3  2  0  0  0  0\n"+
			"  7  4  1  0  0  0  0\n"+
			"  4  8  1  0  0  0  0\n"+
			"  4  9  2  0  0  0  0\n"+
			"  7  5  1  0  0  0  0\n"+
			"  8  6  1  0  0  0  0\n"+
			"  1 10  2  0  0  0  0\n"+
			"  3 12  1  0  0  0  0\n"+
			"  2 13  1  0  0  0  0\n"+
			" 13 11  2  0  0  0  0\n"+
			" 12 11  1  0  0  0  0\n"+
			" 12 14  1  0  0  0  0\n"+
			"M  END\n";

	</script>
</head>
<body>
	<h1>Marvin JS Examples - Get Selection</h1>
	<div style="clear: both; width: 100%; text-align: right;"><a href="index.html">Back to index</a></div>
	<div>
		<div class="resizable">
			<iframe src="../editor.html" id="sketch" class="sketcher-frame"></iframe>
		</div>
		<p><input type="button" value="Get Selection" id="getSelectionButton"/></p>
		<p><textarea id="molsource" rows=16 cols=90></textarea></p> 
	</div>
	<p>This example demonstrates how to inject selection information into the generated MRV source.</p>
	<p>When <strong>Get Selection</strong> button is pushed, the <strong>getSelection</strong> function is called that retrieves the canvas content in MRV format. Since <em>exportStructure</em> is an asynchronous request, we get index of selected atoms when the MRV source received.</p>
	<p>After that, inject selection information into the MRV source with the help of <strong>mrvWithSelection</strong> function.
	Its result displays in the below text box</p> 
	<pre><code data-language="javascript">	$(document).ready(function handleDocumentReady (e) {
		MarvinJSUtil.getEditor("#sketch").then(function (sketcherInstance) {
			// initalize sketcher
			sketcherInstance.importStructure("mol",caffeineSource);
			sketcherInstance.setDisplaySettings({
				'carbonLabelVisible' : true,
				'atomIndicesVisible' : true
			});

			getSelection = function () {
				sketcherInstance.exportStructure("mrv").then(function(source) {
					var selection = sketcherInstance.getSelection();
					$("#molsource").val(mrvWithSelection(source, selection));
				}, function(error) {
					alert("Cannot retrieve the molecule source");
				});	
			};
			
			$("#getSelectionButton").on("click", getSelection);


		}, function () {
			alert("Cannot retrieve sketcher instance from iframe");
		});
	});</code></pre>
	
	<p>The <strong>mrvWithSelection</strong> function checks whether selection is empty.
	If yes, it does nothing just returns with the original MRV source.
	
	If the selection contains one or more atom indeces, it builds up a DOM object from the MRV source and iterates over the list of indeces to find the appropriate atom tags. Append the "isSelect" attribute to each atom tag that matched.
	Finally, it serializes the above DOM object and returns with the generated string</p> 
	<pre><code data-language="javascript">	function mrvWithSelection(mrv, selection) {
		var parser = new DOMParser();
		if(selection && selection.atoms) {
			var xml = parser.parseFromString(mrv, "text/xml");
			var atoms = xml.getElementsByTagName('atom');
			var selectedAtoms = selection.atoms.split(",");
			for(var i = 0; i < selectedAtoms.length; i++) {
				var index = selectedAtoms[i]-1;
				if(atoms[index]) {
					atoms[index].setAttribute("isSelected", true);
				}
			}
			return new XMLSerializer().serializeToString(xml);
		}
		return mrv;
	}</code></pre>
		<div style="clear: both; width: 100%; text-align: right;"><a href="index.html">Back to index</a></div>
  </body>
</html>
